<template>
	<view class="">
		<view class="text-center"><tab :tab-list="tabList" :all-show="false" :tab-cur="tabCur" @contTabChange="contTabChange"></tab></view>
		<view v-if="list.length <= 0" class="pt-5 m-auto"><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无展会"></u-empty></view>
		<view class="p-2" v-else>
			<view class="bg-white p-2 rounded_10 shadow mb-2" v-for="item of list" :key="item.id" @click="toJoin(item)">
				<view class="status_box flex justify-between pb-1">
					<text class="font-weight-bolder font">参展状态</text>
					<text class="font_24 c_9">{{ state(item.status) }}</text>
				</view>
				<view class="my-2 flex">
					<view class="" style="width: 260rpx"><image :src="item.thumb" mode="aspectFill" style="width: 260rpx;height: 150rpx;"></image></view>
					<view class="flex flex-column justify-between pl-2">
						<view class="text_hidden2 font">{{ item.title }}</view>
						<view class="flex justify-between">
							<text class="font_24 c_9">{{ item.start_time }}</text>
							<text class="font_24 c_9">{{ item.address }}</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
		</view>
	</view>
</template>

<script>
import tab from '@/components/tab/index.vue';
import { myExhibition } from '@/api/exhibition/exhibition.js';
export default {
	components: { tab },
	data() {
		return {
			tabList: [{ id: 0, title: '即将开始' }, { id: 1, title: '正在开展' }, { id: 2, title: '已结束' }],
			page: 1,
			status: 'loadmore',
			list: [],
			tabCur: 0
		};
	},
	computed: {
		state(val) {
			return function(val) {
				switch (val) {
					case 1:
						return '审核中';
						break;
					case 2:
						return '已通过';
						break;
					case 3:
						return '已拒绝';
						break;
					default:
						return '审核中';
						break;
				}
			};
		}
	},
	onReachBottom() {
		if (this.suo) {
			//定义个小锁，当没有数据时锁住suo
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.getInfo(this.tabCur);
			}, 1000);
		}
	},
	onLoad() {
		this.getInfo(this.tabCur);
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		contTabChange(e) {
			this.tabCur = e.idx;
			this.page = 1;
			this.list = [];
			this.getInfo(e.idx);
		},
		getInfo(val) {
			let msg = {
				token: uni.getStorageSync('userInfo').token || '',
				activity_status: val + 1,
				page: this.page
			};
			myExhibition(msg)
				.then(res => {
					if (res.code == 0) {
						console.log(res);
						this.list.push(...res.list);
						if (res.list.length == 0) {
							this.status = 'nomore';
							this.suo = false;
						} else if (res.list.length < 10) {
							this.status = 'nomore';
							this.suo = false;
						} else {
							this.status = 'loadmore';
							this.suo = true;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取我的展会失败', err);
				});
		},
		toJoin(val) {
			if (val.id == 0) {
				// 跳转展会列表
				this.goPages('/subPages/exhibition/list');
			} else {
				// 跳转展会详情
				// activity_status   1 即将开始，2 已开始，3，已结束
				// if (val.activity_status == 1) {
				// 	uni.navigateTo({
				// 		url: '/subPages/exhibition/before?id=' + val.id + '&active=' + val.activity_status
				// 	});
				// } else {
					uni.navigateTo({
						url: '/subPages/exhibition/index?id=' + val.id + '&active=' + val.activity_status
					});
				// }
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.status_box {
	border-bottom: 1px solid #c1c1c1;
}
</style>
